<template>
    <div id="app">
        <iframe src='http://www.thingjs.com/pp/827c8b262941ec20290b68f6' width="100%" height="100%" frameborder="no"
            allowtransparency="yes" ref="myIframe">

        </iframe>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            ws: null
        };
    },
    created() {
        this.ws = new WebSocket('ws://10.48.219.10:8090');

        this.ws.onmessage = async (event) => {
            if (event.data instanceof Blob) {
                const text = await event.data.text();
                console.log('Message from server: ', text);
                this.message = text;
            } else {
                console.log('Message from server: ', event.data);
                this.message = event.data;
            }
        };
    },
    mounted() {
        this.iframeMessage();
    },
    methods: {
        sendMessage(type,id) {
            let json = JSON.stringify({
                type: type,
                id: id
            })

            this.ws.send(json);
        },
        iframeMessage() {
            var that = this
            window.addEventListener('message', (res) => {

                if (res.origin === 'http://www.thingjs.com') {
                    console.log('res --------->', JSON.parse(res.data))
                    var data = JSON.parse(res.data);
                    if(data.camera_id){
                        that.sendMessage('camera',data.camera_id)
                    }
                    if (data.mes_id) {
                        that.sendMessage('mes',data.mes_id)
                    }
                }
            })
        },
    }
};
</script>

<style>
html {
    height: 100%;
}

body {
    height: 100%;
}

#app {
    height: 100%;
}
</style>